<template>
	<view class="content pad">
		<view class="pt-20">
			📝 直接提问
		</view>
		<view class="input-box  mt-16 pad-16">
			<textarea  :rows="4" class="input-text-area font-26" placeholder="请输入问题" v-model="content"></textarea>
			<view class="sumbit-box flex-row flex-end mt-10">
				<button class="btn" @click="cleQs">清空</button>
				<button class="btn primary ml-20" @click="subDraw">AI绘画</button>
				<button class="btn primary ml-20" @click="subQs">提交问题</button>
			</view>
		</view>
		<view class="flex space-between mt-30">
			<view class="left">
				🔥 热门提问
			</view>
			<view class="flex-row flex-align c-9" @click="changeQS">
				换一换<image src="@/static/img/refresh.png" class="icon-refresh" mode=""></image>
			</view>
		</view>
		<view class="list-content mt-16">
			<view class="item text-line1 bg-gray" @click="hotChoose(item)" v-for="item in hotQS" :key="item.id">
				{{item.hotQs}}
			</view>
		</view>
		<view class="flex space-between mt-30">
			<view class="left">
				🛠️ 提问模板
			</view>
			<view class="flex flex-align c-9" @click="navMore">
				更多 <image src="@/static/img/right.png" class="icon-refresh" mode=""></image>
			</view>
		</view>
		<view class="mt-16 moban-box flex-row flex-wrap space-between">
			<view class="item bg-gray pad-18 mt-20 radius-10" v-for="item in allHotQS" :key="item">
				<view class="font-28 c-3" @click="issureTmpBtn(item)">
					{{item.qsTitle}}
				</view>
				<view class="mt-12 font-26 text-line2 c-6"  @click="issureTmpBtn(item)">
					{{item.qsHint}}
				</view>
			</view>
		</view>
		<askPopup ref="askPopupRef" @confirmAnswer="confirmAnswer"></askPopup>
	</view>
</template>

<script setup>
	import { ref, toRefs, reactive,	getCurrentInstance } from 'vue'
	import {	onLoad } from '@dcloudio/uni-app'
	import { toast , randerArray } from '@/utils/tools.js'
	import {queryHotQs,queryAllQs} from '@/http/index.js'
	const hotQS = reactive([]);
	const allHotQS = reactive([]);
	onLoad(()=>{
		queryHotQs().then(res=>{
			let dataArray = randerArray(res.data, 4);
			hotQS.push (...dataArray) ;
		})
		queryAllQs().then(res=>{
			let dataArray = randerArray(res.data, 4);
			allHotQS.push (...dataArray);
		})
		// #ifdef H5
		let pid = functiongetQueryString('pid');
		if(pid){
			uni.setStorageSync('pid', pid);
		}
		// #endif
		// #ifdef MP-WEIXIN
		 // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面  
		let pages = getCurrentPages();
		let page = pages[pages.length - 1].$page.fullPath;  //完整路由地址
		let pid = page.split('pid=')[1]  //携带的pid参数
		if(pid){
			uni.setStorageSync('pid', pid);
		}
		// #endif
	})
	// const {data} = toRefs(hotQS);
	// console.log("requset data",data)
	let issureItem = {};
	const	issureTmpBtn = (item)=>{
		// console.log('qstitle',item)
		askPopupRef.value.ques.qsTitle = item.qsTitle;
		askPopupRef.value.ques.qsHint = item.qsHint;
		askPopupRef.value.ques.qsCall = item.qsCall;
		askPopupRef.value.openPopup();
		issureItem = item;
		/* uni.navigateTo({
			url:'/pages/issureTmp/issureTmp?title='+item.qsTitle
		}) */
	}
	const navMore = ()=>{
		uni.switchTab({
			url:'/pages/template/template'
		})
	}
	const hotChoose = (item)=>{
		console.log("item.hotQs: ",item.hotQs);
		uni.setStorageSync('tmpContent',item.hotQs);
		uni.navigateTo({
			url:'/pages/issureTmp/issureTmp'
		})
	}
	const content = ref(''), isLoading = ref(false);
	function subQs(){
		if(!content.value){
			return toast('请输入问题')
		}
		uni.setStorageSync('tmpContent',content.value);
		uni.navigateTo({
			url:'/pages/issureTmp/issureTmp'
		})
	}
	function cleQs(){
		content.value ='';
	}
	const subDraw = ()=>{
		uni.navigateTo({
			url:'/pages/issureTmp/drawTmp'
		})
	}
	const askPopupRef = ref(null);
	const confirmAnswer = (data)=>{
		// console.log('confirmAnswer father',data);
		if(!data){
			askPopupRef.value.openPopup()
			return toast('问题不能为空')
		}
		let contentValue = issureItem.qsCall+data;
		uni.setStorageSync('tmpContent',contentValue);
		console.log('contentValue',contentValue);
		uni.navigateTo({
			url:'/pages/issureTmp/issureTmp'
		})
	}
	const changeQS = ()=>{
		hotQS.length = 0,
		allHotQS.length = 0;
		queryHotQs().then(res=>{
			let dataArray = randerArray(res.data, 4);
			hotQS.push (...dataArray);
		})
		queryAllQs().then(res=>{
			let dataArray = randerArray(res.data, 4);
			allHotQS.push (...dataArray);
		})
	}
	const functiongetQueryString = (name)=>{
				let geturl = window.location.href 
				let getqyinfo = geturl.split('?')[1]   //qycode=1001&qyname=%E4%BC%81%E4%B8%9A%E5%BF%99   截取到参数部分
				let getqys = new URLSearchParams('?'+getqyinfo)  //将参数放在URLSearchParams函数中
				return getqys.get(name);
		}
</script>

<style lang="scss" scoped>
.input-box{
	box-shadow: 0 0 5px #999999;
	border-radius: 10rpx;
	.sumbit-box{
		.btn{
			// width:120rpx;
		}
	}
}
.icon-refresh{
	width:30rpx;
	height: 30rpx;
	margin-left:8rpx;
}

.list-content{
		.item{
			color:$theme-color;
			line-height: 80rpx;
			font-size: 28rpx;
			padding:0 20rpx;
			border-radius: 8rpx;
			&+.item{
				margin-top:20rpx;
			}
		}
	}
	.moban-box{
		.item{
			width:332rpx;
			box-sizing: border-box;
		}
	}
</style>
